import { generate_hex_color } from "@/utils/formatUtil"

/**
 * 绘制折线图与柱状图 foldLineHistogram
 * myChart：需要绘制的图标
 * titleList：标题
 * x_weeks：X轴数据
 * y_weeks：Y轴数据
 */
export function foldLineHistogram(myChart, titleList, x_weeks, y_weeks,barWidth,title,vueThis) {
    var x_coordinate = x_weeks
    var dataList = y_weeks
    var colors = ['#0070C0', '#ED7D31', '#EE6666', '#F6ACAC', '#F6ACAC','#9A60B4','#FC8452','#FAC858','#FBD98E']
    // titleList.forEach(item => {
    //     colors.push(generate_hex_color())
    // })
    // 绘制图表
    myChart.setOption({
      title: {
        text:title
      },
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        grid: {
            right: '20%'
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: titleList
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                data: x_coordinate
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: titleList[0],
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                },
                axisLabel: {
                    formatter: '{value}'
                }
            },
        ],
        series: [
            {
                name: titleList[0],
                type: 'bar',
                yAxisIndex: 0,
                data: dataList[0],
                barWidth: barWidth || 20, // 设置柱状图的宽度
            },
            {
                name: titleList[1],
                type: 'bar',
                yAxisIndex: 0,
                data: dataList[1],
                barWidth: barWidth || 20, // 设置柱状图的宽度
            },
            // {
            //     name: titleList[0],
            //     type: 'line',
            //     yAxisIndex: 0,
            //     color:'red',
            //     data: dataList[0]
            // },
            {
                name: titleList[1],
                type: 'line',
                yAxisIndex: 0,
                color:'red',
                data: dataList[1],
                barWidth: barWidth || 20, // 设置柱状图的宽度
            }
        ]
    });

    // 添加点击事件
    myChart.on('click', function(params) {
        // if (params.seriesType === 'line') {
        console.log(params);
        //通过路由传递params.name进行跳转
        vueThis.$router.push({ path: '/warning/comwarning', query: { name: params.name } });
        // }
    });


}

export function Histogram(myChart, titleList, x_weeks, y_weeks,barWidth,title) {
    var seriesList = []
    y_weeks.forEach((item, index) => {
        seriesList.push(
            {
                name: titleList[index],
                type: 'bar',
                data: item,
                barWidth: barWidth, // 设置柱状图的宽度barWidth

              //气泡标记特殊点
                markPoint: {
                    data: [
                        { type: 'max', name: 'Max' },
                        { type: 'min', name: 'Min' }
                    ]
                }
            }
        )
    })

    var colors = ['#00B050', '#0070C0', '#ED7D31', '#F6ACAC', '#F6ACAC','#9A60B4','#FC8452','#FAC858','#FBD98E']

    myChart.setOption({
      title: {
        text:title
      },
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {  // 增加分割线
                type: 'cross'
            }
        },
        legend: {  // 表头数据
            data: titleList
        },
        toolbox: {
            show: true,
            feature: {
                dataView: { show: true, readOnly: false },  // 显示数据
                magicType: { show: true, type: ['line', 'bar'] },  // 分类：折线、柱状图
                restore: { show: true },  // 还原图标
                saveAsImage: { show: true }  // 下载图片
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                data: x_weeks
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: seriesList
    })
}
